<template>
    <div>
        <mainTitleText>
            <span slot="account" class="account">我的财务</span>
            <span slot="accountEnglish">MY FINANCIAL</span>
        </mainTitleText>
        <div class="layui-form-item type">
            <div class="layui-input-inline">
                <button
                        class="layui-btn layui-btn-primary"
                        :class="{btn:isType === false}"
                        @click="btn"
                        type="button">未结佣</button>
                <button
                        class="layui-btn layui-btn-primary"
                        :class="{btn:isType === true}"
                        @click="btn1"
                        type="button">
                    已结佣
                </button>
            </div>
        </div>
        <div class="main">
            <div class="search">
                <span>共找到{{count}}个账号</span>
                <form class="layui-form layui-form-pane form2">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input
                                    type="text"
                                    name="text"
                                    required=""
                                    v-model="search"
                                    lay-verify="required"
                                    onkeydown="if(event.keyCode==13){searchPush()};"
                                    @keyup.enter="searchPush"
                                    placeholder="请输入关键字"
                                    autocomplete="off"
                                    class="layui-input">
                        </div>
                        <label class="layui-form-label" @click="searchPush">
                            <i></i>
                        </label>
                    </div>
                </form>
            </div>
            <table id="table"
                   :formTable="formTable"
                   lay-filter='text'
                   style="width: 100%!important;"></table>
            <div id="barDemo">
                <!--layui-icon-edit-->
                <a class="layui-btn layui-btn-xs" style="background-color:#cd1f5c;color:#fff;padding: 0 5px;" lay-event="useDetail">
                    <i class="layui-icon "></i>客户详情</a>
                <!--layui-icon-rmb-->
                <a class="layui-btn layui-btn-xs" v-if="isType === false" style="background-color: #999;color:#fff;padding: 0 5px;" lay-event="sucBrokerage">
                    <i class="layui-icon "></i>提现佣金</a>
            </div>
            <!--点击查看弹出修改页面-->
            <div id="detail" class="">
                <form action="" class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：{{values.name1?values.name1:'无'}}
                        </div>
                        <div class="layui-inline">
                            电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：{{values.telephone1?values.telephone1:'无'}}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：{{values.sex?values.sex:'无'}}
                        </div>
                        <div class="layui-inline">
                            意向楼盘：{{values.building?values.building:'无'}}
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            跟进状态：{{values.status?values.status:'无'}}
                        </div>
                        <div class="layui-inline">
                            约访时间：{{values.schedule?values.schedule:'无'}}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            跟&nbsp;进&nbsp;&nbsp;人：{{values.name?values.name:'无'}}
                        </div>
                        <div class="layui-inline">
                            成交价格：{{values.price?values.price:'无'}}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            成交户型：{{values.type?values.type:'无'}}
                        </div>
                        <div class="layui-inline">
                            成交房号：{{values.number?values.number:'无'}}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            录入时间：{{values.date?values.date:'无'}}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="title">跟进信息</div>
                        <div class="edit-text" v-if="!follow_info">
                            <div
                                    class="layui-form-text"
                                    v-for="item in values.follow_info"
                            >
                                <p><span>【跟&nbsp;&nbsp;进&nbsp;人】</span><span>{{item.account_id}}</span></p>
                                <p><span style="letter-spacing: 0.3px">【职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位】</span><span>{{item.role}}</span></p>
                                <p><span>【跟进信息】</span><span>{{item.content}}</span></p>
                                <p><span>【跟进时间】</span><span>{{item.date}}</span></p>
                            </div>
                        </div>
                        <div style="text-align: center;padding:20px;color: #999;" v-else>暂无跟进信息</div>
                    </div>
                    <div class="layui-form-item" style="height:auto;">
                        <div class="title">我的转介</div>
                        <div class="edit-text transfer_info" v-if="!transfer_info">
                            <div
                                    class="layui-form-text"
                            >
                                <p><span>【转&nbsp;&nbsp;介&nbsp;人】</span><span>{{values.transfer_info.to_account_id}}</span></p>
                                <p><span style="letter-spacing: 0.3px">【职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位】</span><span>{{values.transfer_info.role}}</span></p>
                                <p><span>【转介时间】</span><span>{{values.transfer_info.date}}</span></p>
                            </div>
                        </div>
                        <div style="text-align: center;padding:20px;color: #999;" v-else>暂无转介信息</div>
                    </div>
                    <div class="layui-form-item">
                        <div class="title">我的凭证</div>
                        <img
                                v-if="!deal_info"
                                v-for="item in values.deal_info" :src="item.img"
                                @click="imgShow">
                        <p v-if="deal_info" style="text-align: center;padding:20px;color: #999;">暂无凭证</p>
                    </div>
                </form>
            </div>

        </div>
    </div>

</template>

<script>
    import $ from 'jquery'
    import mainTitleText from '@/components/module/mainTitleText'

    export default {
        name: "finance",
        props:['urls'],
        components:{
            mainTitleText:mainTitleText
        },
        data() {
            return {
                isType: false,
                count:'',
                values:{},
                follow_info:true,
                deal_info:true,
                transfer_info:true,
                search:''
            }
        },
        computed:{
            formTable() {
                var _this = this,
                    url = this.urls.finance1.data;
                layui.use(['table','form'], function () {
                    var table = layui.table;
                    var form = layui.form;
                    //实例
                    _this.$nextTick(function() {
                        table.render({
                            elem: '#table'
                            , id: 'idTest'
                            , height: '491'
                            , limit: 10
                            , url: url //数据接口
                            , page: {theme: '#cd1f5c'} //开启分页
                            , cols: [[ //表头
                                {field: 'numbers', title: '序号', type: 'numbers', minWidth: 80}
                                , {field: 'name1', title: '姓名', minWidth: '80'}
                                , {field: 'telephone1', title: '电话', minWidth: '140'}
                                , {field: 'type', title: '户型', minWidth: '140'}
                                , {field: 'number', title: '房号', minWidth: '60'}
                                , {field: 'price', title: '价格', minWidth: '80'}
                                , {field: 'date', title: '日期', minWidth: '200'}
                                , {field: 'price', title: '佣金(元)', minWidth: '100'}
                                , {title: '操作', align: 'center', minWidth: '300', toolbar: '#barDemo', fixed: 'right'} //这里的toolbar值是模板元素的选择器}
                            ]]
                            , done: function (res, curr, count) {//渲染完成回调，获取总条目数。
                                _this.count = count;
                                // // console.log(res, curr, count)
                            }
                        });
                    })
                    //监听工具条事件
                    table.on('tool(text)', function (obj) {
                        var data = obj.data //获得当前行数据
                            , layEvent = obj.event; //获得 lay-event 对应的值
                        if (layEvent === 'sucBrokerage') {
                            layer.confirm('本次提现佣金额为：'+obj.data.price+'元<br />您确定要提现吗？',{title:'确认结佣'}, function (index) {
                                layer.close(index);
                                $.ajax({
                                    type:'GET',
                                    url:_this.urls.finance.inserts,
                                    data:{id:data.id},
                                    success:function(res){
                                        // // console.log(res)
                                        layer.msg(res.message)
                                    }
                                })
                            });
                        }else if(layEvent === 'useDetail'){
                            _this.values = obj.data;
                            _this.follow_info = (_this.values.follow_info.length === 0);
                            _this.deal_info = (_this.values.deal_info.length === 0);
                            _this.transfer_info = (_this.values.transfer_info === null);
                            layer.open({
                                type: 1,
                                area:['500px','600px'],
                                title:['基本信息'],
                                content: $('#detail'),
                                cancel:function(){
                                    $('#detail').hide();
                                }
                            });
                        }
                    });
                });
            },
        },
        methods: {
            btn() {//未结佣
                var url = this.urls.finance1.data;
                this.isType = false;
                layui.use('table',function(){
                    var table=layui.table;
                    table.reload('idTest', {
                        url: url,
                        where:{
                            status:0
                        }
                    });
                })
            },
            btn1() {//已结佣
                var url = this.urls.finance1.data;
                this.isType = true;
                layui.use('table',function(){
                    var table=layui.table;
                    table.reload('idTest', {
                        url: url,
                        where:{
                            status:1
                        }
                    });
                })
            },
            searchPush(){//search 获取查询数据 重载表格
                var key = this.search,
                    url = this.urls.finance1.data;
                layui.use(['table'], function () {//搜索直接更新表格数据
                    var table = layui.table;
                    table.reload('idTest', {
                        url: url,
                        where:{
                            key:key
                        }
                    });
                })
            },
            imgShow(e){
                // // console.log(e.target.src);
                layui.use('layer',function(){
                    layer.open({
                        type: 1,
                        area:['500px','600px'],
                        title:['凭证详情'],
                        content: '<img src='+e.target.src+' />',
                        // cancel:function(){
                        //     $('#edit').hide();
                        // }
                    });
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../static/css/style.less";
    .btn {
        .blg(to right, #cd1f5c, #e11e27);
        color: @cf;
        border: none;
    }
    .main {
        background-color: @cf;
        padding: 20px;
        .bs(0 0 5px #ccc);
        margin-top: 20px;
        .search {
            width: 100%;
            height: 40px;
            line-height: 30px;
            padding: 5px 20px;
            background-color: #ededed;
            .pr;
            > span, > .form2 {
                .fl;
            }
            > .form2 {
                .pa;
                right: 20px;
                .layui-form-item {
                    .pr;
                    .layui-input-inline {
                        width: 220px;
                        height: 30px !important;
                        margin: 0 38px 0 0;
                        input {
                            height: 30px !important;
                            .br(2px 0 0 2px);
                        }
                    }
                    label {
                        width: 40px;
                        height: 30px;
                        .pa;
                        top: 0;
                        right: 0;
                        cursor: pointer;
                        .br(0 2px 2px 0);
                        .blg(to right, #cd1f5c, #e11e27);
                        i {
                            width: 15px;
                            height: 15px;
                            display: inline-block;
                            .pa;
                            .cm;
                            .bud("../../static/images/search.svg", center center, 100% 100%);
                        }
                    }
                }
            }

        }
    }
    #detail{
        width: 100%;
        height: 100%;
        padding:15px 20px;
        display: none;
        form{
            width: 100%;
            height: 100%;
            label{
                width: 120px;
                height: 40px;
                line-height: 40px;
                padding-right:20px;
            }
            .layui-form-item {
                margin-bottom: 15px;
                clear: both;
                .title{
                    background: #e3e3e3;
                    color: #666;
                    padding:5px 10px;
                }
                .edit-text{
                    width: 100%;
                    max-height: 250px;
                    overflow: auto;
                    >div{
                        padding:20px 0;
                        border-bottom: 1px solid #eee;
                        p{
                            line-height: 30px;
                            .df;
                            span:first-child{
                                width: 85px;
                            }
                            span:last-child{
                                width: 341px;
                            }
                        }
                    }

                }
                .transfer_info{
                    height: auto;
                }
                .layui-inline{
                    width: 49%;
                    margin-right: 0;
                }
                img{
                    width: 48%;
                    padding: 10px;
                    margin: 10px 1% 0;
                    cursor: pointer;
                }
            }
        }
        button{
            .blg(to right,#cd1f5c,#e11e27);
        }

    }
    #barDemo{
        .dn;
    }
</style>